<script lang="ts" setup>
import { isNil } from 'lodash-es'

const props = defineProps<{
  beforeChange?: () => Promise<void>
}>()
const model = defineModel()

async function onClick() {
  if (!model.value && !isNil(props.beforeChange)) {
    try {
      await props.beforeChange()
    }
    catch {}
  }

  model.value = !model.value
}
</script>

<template>
  <view @click="onClick">
    <view class="pointer-events-none">
      <switch :checked="model" class="origin-r scale-70" color="#f7920d"></switch>
    </view>
  </view>
</template>

<style lang="less" scoped></style>
